<!-- 区域的组件 -->
<template>
  <el-row>
    <div style="margin-left: 30px">
      <el-button
        type="primary"
        :disabled="widget.options.disabled"
        @click.native="handleAddRow()"
        >添加</el-button
      >
      <el-button
        type="primary"
        :disabled="widget.options.disabled"
        @click="dialogFormVisible = true"
        >导出数据</el-button
      >
    </div>

    <el-dialog
      title="导出的列"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
    >
      <el-checkbox-group
        v-model="checkedCities"
        @change="handleCheckedCitiesChange"
      >
        <el-checkbox
          v-for="(key, index) in columns"
          :label="key.model"
          :key="key.model"
          checked
          >{{ key.name }}
        </el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click.native="confirmDialog()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <div v-for="(column1, index) in tableData">
      <el-button
        v-if="index > 0"
        class="el-icon-delete-solid"
        type="danger"
        @click.native="handleRemove(index)"
        >删除</el-button
      >
      <div
        v-for="(column, p_index) in columns"
        :key="column.key"
        :class="{
          'el-col-24': columns.length % 2 != 0 && p_index == columns.length - 1
        }"
      >
        <el-col
          :span="column.options !== undefined && column.options.span"
          class="drag-widget field-item"
        >
          <!--			<label v-if="column.type != 'divider'" style="min-width:70px;float: left;"  :class="{'is_req': column.options.required,'display':'block'}"> {{column.name}}: </label>-->
          <div v-if="column">
            <div v-if="column.model">
              <el-form-item
                :class="{ is_req: column.options.required, display: 'block' }"
                :label="getLable(column)"
                :prop="widget.model + '.' + index + '.' + column.model"
                :rules="column.rules ? column.rules : []"
              >
                <GenerateElementItem
                  :blanks="blanks"
                  is-table="block"
                  :path="widget.model + '.' + index + '.' + column.model"
                  v-model="value[index][column.model]"
                  :models_temp="models_temp"
                  :widget="column"
                  :remote="remote"
                  :models.sync="dataModels"
                  :strutAll="strutAll"
                  :index="2"
                >
                </GenerateElementItem>
              </el-form-item>
            </div>
          </div>
        </el-col>
      </div>
    </div>
  </el-row>
</template>

<script>
import { importXLSX } from "../router/xlsx.js";
import { verification } from "../router/verification.js";
import { getLable, guid } from "../js/formUtils.js";

function isInArray(arr, value) {
  for (var i = 0; i < arr.length; i++) {
    if (value === arr[i]) {
      return true;
    }
  }
  return false;
}
export default {
  components: {
    GenerateElementItem: () => import("../GenerateElementItem.vue")
  },
  props: [
    "columns",
    "value",
    "models",
    "remote",
    "blanks",
    "models_temp",
    "widget",
    "strutAll",
    "data",
    "path"
  ],
  data() {
    //console.log(this.columns[0].options.defaultValue);
    return {
      tableData: this.value,
      dataModels: this.models,
      checkedCities: [],
      dialogVisible: false,
      dialogFormVisible: false
    };
  },
  created() {
    for (var i = 0; i < this.columns.length; i++) {
      if (this.columns[i].rules) {
        for (var j = 0; j < this.columns[i].rules.length; j++) {
          this.columns[i].rules[j].validator = this.validatePass;
        }
      }
    }
  },
  methods: {
    getLable: function(element) {
      return getLable(element);
    },
    validatePass(rule, info, callback) {
      verification(rule, info, callback);
    },
    handleAddRow() {
      var dataModels = this.dataModels;
      let item = {};
      if (this.columns !== undefined) {
        if (this.columns.length > 0) {
          for (let i = 0; i < this.columns.length; i++) {
            item[this.columns[i].model] = "";
            item["ID_"] = guid();
          }
        }
      }
      this.tableData.push(item);
    },
    handleRemove(index) {
      this.tableData.splice(index, 1);
    },
    isInArray(arr, value) {
      for (var i = 0; i < arr.length; i++) {
        if (value === arr[i]) {
          return true;
        }
      }
      return false;
    },
    handleImport() {},
    handleClose() {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleCheckedCitiesChange(value) {
      this.checkedCities = value;
    },
    exportData() {
      this.dialogFormVisible = false;
    },
    confirmDialog(value) {
      this.dialogFormVisible = false;
      var checkedCities = this.checkedCities;
      if (checkedCities.length == 0) {
        return;
      }
      var title = [];
      var columns = this.columns;
      for (var i = 0; i < columns.length; i++) {
        var column = columns[i];
        var exist = isInArray(checkedCities, column.model);
        if (exist) {
          title.push(column.name);
        }
      }
      var items = [];
      for (let i = 0; i < this.checkedCities.length; i++) {
        var item = [];
        for (let j = 0; j < this.tableData.length; j++) {
          item.push(this.tableData[j][this.checkedCities[i]]);
        }
        items[this.checkedCities[i]] = item;
      }
      console.log(items);
      console.log(title);
      var _data = [];
      _data.push(title);

      for (let j = 0; j < this.tableData.length; j++) {
        var t = this.tableData[j];
        var td = [];
        for (let i = 0; i < this.checkedCities.length; i++) {
          var d = t[checkedCities[i]];
          td.push(d);
        }
        _data.push(td);
      }
      importXLSX(_data, this.widget.name);
    }
  },
  watch: {}
};
</script>

<style lang="scss">
.row-bd {
  border: 1px solid #ebeef5;
  padding-top: 12px;
}
.addRow {
  display: block !important;
  margin-top: 18% !important;
}
.is_req {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
</style>
